/**
 * @name: SmallWindow
 * @Description:
 * @Author: 方琦
 * @Date: 2022/8/17 21:54
 **/
import React, {useState} from 'react';
import {createPortal} from 'react-dom';
import "../../assets/fonts/iconfont.css";
import smallWindow from "./smallWindow.module.css"

const Model = (props) => {
    const {title, width, top, left, children, right, closeModal} = props
    return (
        <div className={smallWindow.container} style={{width, top, right}}>
            <div className={`${smallWindow.title} ${smallWindow.clear}`}>
                <span className={smallWindow.left}>{title}</span>
                <span className={`${smallWindow.right} iconfont icon-guanbi`}
                      onClick={closeModal}></span>
            </div>
            <div className={smallWindow.content}>
                {children}
            </div>
        </div>
    )
}

const SmallWindow = (props) => {
    const {visible = true} = props;
    return <>{visible && createPortal(<Model {...props} />, document.body)}</>;
}
export default React.memo(SmallWindow);
